<template>
    <el-form :model="blog" label-width="120px">
        <el-form-item label="标题：">
            <el-input v-model="blog.title" :value="blog.title" style="width:600px"/>
        </el-form-item>
        <el-form-item label="内容："> 
            <div style="height:460px">
                <my-markdown style="width:800px" @sendToAddblog="getData" :markdown="blog.content"></my-markdown>
            </div>        
        </el-form-item>
        <el-form-item label="封面">
            <el-upload
                class="avatar-uploader"
                :auto-upload="false"
                :show-file-list="false"
                :limit="1"
                :on-change="uploadFile"
                drag
            >
                <img v-if="blog.cover" :src="blog.cover" class="avatar" :fit="cover" :value="blog.cover"/>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="标签：">
            <el-select v-model="blog.tag" placeholder="请选择标签">
                <el-option v-for="(item,index) in options" :key="index" :label="item.tag" :value="item.tag" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import MyMarkdown from './MyMarkdown.vue';
export default {
    name:"addBlog",
    components:{MyMarkdown},
    data(){
        return {
            blog : {title: '',tag: '',cover: '',content: ''},
            blogList:[],
            options:[
                {id:1,tag:'vue'},
                {id:2,tag:'node'},
                {id:3,tag:'egg'},
            ]
        }
    },
    methods:{
        // 提交
        onSubmit(){
            console.log('blog',this.blog);
            this.blogList.push(this.blog);
            console.log('blogList',this.blogList);
        },
        // 上传图片
        uploadFile(item) {
            console.log('item',item);
            let formData = new FormData();
            let file = item.raw;
            this.blog.cover = URL.createObjectURL(file);
            formData.append("file", file);
        },
        // 从子级MyMarkdown接收博客内容
        getData(data){
            this.blog.content = data;
        }
    }
}
</script>

<style>
.el-upload{
    --el-upload-dragger-padding-horizontal: 10px;
}
.avatar-uploader .avatar {
    width: 78px;
    height: 78px;
    display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  text-align: center;
}
</style>